<template>
    <header>
        <svg id="left" t="1665562414462" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="2793" width="20" height="20">
            <path d="M149.333333 170.858667A21.546667 21.546667 0 0 1 170.858667 149.333333H384V106.666667H170.858667A64.213333 64.213333 0 0 0 106.666667 170.858667V384h42.666666V170.858667zM170.858667 874.666667A21.546667 21.546667 0 0 1 149.333333 853.141333V640H106.666667v213.141333A64.213333 64.213333 0 0 0 170.858667 917.333333H384v-42.666666H170.858667zM853.12 149.333333A21.546667 21.546667 0 0 1 874.666667 170.858667V384h42.666666V170.858667A64.213333 64.213333 0 0 0 853.141333 106.666667H640v42.666666h213.141333zM874.666667 853.141333A21.546667 21.546667 0 0 1 853.141333 874.666667H640v42.666666h213.141333A64.213333 64.213333 0 0 0 917.333333 853.141333V640h-42.666666v213.141333zM106.666667 490.666667h810.666666v42.666666H106.666667v-42.666666z"
                  fill="#ff8a4a" p-id="2794"></path>
        </svg>
        <svg id="xian" t="1665564664098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4208" width="20" height="20"><path d="M486.4 102.4l51.2 0 0 819.2-51.2 0 0-819.2Z" p-id="4209" fill="#a6a6a6"></path></svg>
        <input type="text" id="center" placeholder="河间驴肉火烧 | 杨铭宇黄焖鸡">
        <input id="right" type="button" value="搜索" >
    </header>
</template>

<script>
    export default {
        name: "SearchCom"
    }
</script>

<style scoped>
    header {
        display: flex;
        width: 100%;
        height: 30px;
        overflow: hidden;
        border-radius: 25px;
        border: 2px solid #ff8a4a;
    }
    #left {
        vertical-align: top;
        flex: 1;
        width: 25px;
        height: 25px;
        margin-top: 2px;
    }
    #center {
        vertical-align: top;
        flex: 6;
        border-style: none;
        background: #ffffff;
    }
    #right {
        vertical-align: top;
        width: 55px;
        height: 100%;
        border-radius: 30px;
        border-style: none;
        background: #ff8a4a;
        color: whitesmoke;
        flex: 1;
    }
    #xian{
        margin-top: 5px;
    }


</style>